<template>
    <view>
        <view class="box">
            <view class="p1">
                <input type="text" placeholder="请输入消费总额" />
                <image src="/static/images/person.png" mode="" />
            </view>
            <view class="p2">
                <input type="text" placeholder="不参与优惠金额" />
            </view>
            <view class="p3">
                可选择优惠商品
                <image src="/static/images/car.png" mode="" />
            </view>

            <view class="p4">
                <view class="left">
                    <view v-for="(item, index) in numList" :key="index">{{ item }}</view>
                </view>
                <view class="right">
                    <view class="img1">
                        <image src="/static/images/exit.png" mode="" />
                    </view>
                    <view class="img2" @tap="goOther">
                        <image src="/static/images/other-sk.png" mode="" />
                    </view>
                    <view class="img3">
                        <image src="/static/images/scan1.png" mode="" />
                    </view>
                </view>
            </view>
        </view>

        <view class="bottom" v-if="show">
            <view class="close" @tap="close"><image src="/static/images/close.png" mode="" /></view>
            <view class="p">
                现金支付
                <image src="/static/images/right.png" mode="" />
            </view>
            <view class="p">
                瑞祥卡支付
                <image src="/static/images/right.png" mode="" />
            </view>
            <view class="p">
                其它支付
                <image src="/static/images/right.png" mode="" />
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
const $http = app.globalData.$http;
var config = require('../../utils/config.js');
export default {
    data() {
        return {
            picUrl: config.Config,
            numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '0', '.'],
            index: 0,
            show: false,
            allCheck: '',
            isCheck1: '',
            isCheck2: '',
            isCheck3: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        // 处理选择变化
        bindPickerChange: function (e) {
            this.setData({
                index: e.detail.value
            });
        },

        handleCheckAll(event) {
            this.setData({
                allCheck: !this.allCheck,
                isCheck1: !this.allCheck,
                isCheck2: !this.allCheck,
                isCheck3: !this.allCheck
            });
        },

        goOther: function () {
            if (uni.getStorageSync('token') == '') {
                uni.showToast({
                    title: '您还未登录，请先登录',
                    icon: 'none'
                });
                setTimeout(function () {
                    uni.navigateTo({
                        url: '/pages/login/index'
                    });
                }, 1200);
            } else {
                this.setData({
                    show: true
                });
            }
        },

        close() {
            this.setData({
                show: false
            });
        }
    }
};
</script>
<style>
.box {
    width: 700rpx;
    margin: 0 auto;
    font-size: 32rpx;
    color: #323232;
    margin-top: 20rpx;
}

.p1 {
    border: 2rpx solid rgb(245, 52, 22);
    border-radius: 16rpx;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.p1 input {
    display: block;
    width: 80%;
}

.p1 image {
    width: 62rpx;
    height: 64rpx;
}

.p2 {
    border: 2rpx solid rgb(245, 52, 22);
    border-radius: 16rpx;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
}

.p2 input {
    display: block;
    width: 100%;
}

.p3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    font-weight: 300;
}

.p3 image {
    width: 48rpx;
    height: 47rpx;
}
.p4 {
    background: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
    padding-bottom: 30rpx;
    display: flex;
    left: 0;
    z-index: 1;
}
.p4 .left {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    width: 75%;
}

.p4 .left view {
    font-size: 96rpx;
    font-weight: 400;
    width: 33.333%;
    height: 140rpx;
    line-height: 140rpx;
}
.p4 .right {
    width: 25%;
}
.p4 .right .img1 {
    width: 128rpx;
}
.p4 .right .img1 image {
    width: 128rpx;
    height: 128rpx;
}
.p4 .right .img2 {
    width: 128rpx;
}
.p4 .right .img2 image {
    width: 112rpx;
    height: 124rpx;
    display: block;
    margin: 0 auto;
}
.p4 .right .img3 {
    background: #fe725c;
    width: 132rpx;
    height: 248rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40rpx;
    border-radius: 8rpx;
}
.p4 .right .img3 image {
    width: 112rpx;
    height: 102rpx;
}

.bottom {
    position: fixed;
    z-index: 2;
    bottom: 0;
    background: #fff;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 20rpx 20rpx 0 0;
    padding: 40rpx 0 100rpx 0;
}
.bottom .p {
    width: 700rpx;
    margin: 0 auto;
    border-radius: 12rpx;
    background: rgba(196, 196, 196, 0.34);
    margin-top: 20rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: right;
    color: #000;
}
.bottom .p image {
    width: 21rpx;
    height: 32rpx;
    margin: 0 20rpx;
    display: block;
    float: right;
    margin-top: 25rpx;
}
.close {
    width: 700rpx;
    margin: 0 auto;
    text-align: right;
}
.close image {
    width: 24rpx;
    height: 24rpx;
}
</style>
